/*
 * Copyright © 2016 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */
@import '../../styles/variables.scss';

.market-entity-modal.modal-dialog {
  width: 60vw;
  max-width: 1000px;
  margin-top: 180px;
  max-height: 360px;

  .modal-content {
    border-radius: 0;
    .modal-header {
      background-color: gray;
      color: white;
      padding: 0;

      // This is because reactstrap doesn't allow us to change the h4 tag
      h4 {
        font-size: 14px;
        font-weight: 400;
        > span:first-child {
          padding: 10px 20px;
        }
        span.version {
          span.version-text {
            padding: 10px 0;
            margin-right: 5px;
          }
          span.version-number {
            padding: 10px 20px 10px 0;
          }
          span.fa.fa-times {
            cursor: pointer;
            padding: 14px 20px;
            border-left: 1px solid;
          }
        }
      }
      button.close {
        display: none;
      }
    }

    .modal-body {
      max-height: 55vh;
      overflow-y: auto;
      padding: 0;

      .entity-information {
        padding: 15px;
        display: inline-flex;
        background-color: #eeeeee;
        width: 100%;

        .entity-modal-image {
          width: 100px;
          height: 100px;

          img {
            width: inherit;
            height: inherit;
          }
        }
        .entity-content {
          display: flex;
          flex-direction: row;
          width: calc(100% - 125px);
          .entity-description {
            margin-left: 10px;
            padding-right: 15px;
            width: 70%;
          }
          .entity-metadata {
            > div {
              color: gray;
            }
          }
        }
      }
      .market-entity-actions {
        margin-left: 10px;

        .action-container {
          display: inline-flex;
          flex-direction: column;

          .step {
            font-size: 16px;
            margin-bottom: 5px;
            .tag {
              background: #777777;
              &.completed {
                background-color: $state-success-text;
              }
            }
          }
          .action {
            display: inline-block;
            width: 120px;
            margin: 10px;
            padding: 10px 0;
            font-weight: 500;
            cursor: pointer;

            .action-image {
              width: 100px;
              height: 100px;
              background-color: grey;
            }

            .action-icon {
              background-color: #dddddd;
            }
            .action-description {
              height: 40px;
              background-color: #eeeeee;
              font-size: 11px;
              padding: 2px 4px;
            }
            .fa {
              &[class*="icon-"],
              &.fa-upload,
              &.fa-info {
                font-size: 50px;
                margin: 5px 0;
              }
            }
            .btn {
              font-weight: 500;
              color: #666666;
            }
          }
        }
      }
    }
  }
}
